// 弹出窗口
.modal-header {
  display: flex;
  align-items: flex-start; 
  justify-content: space-between; 
  flex-shrink: 0;
  padding:$farris-modal-header-padding;
  background: $farris-modal-header-bg;
  color: $farris-modal-header-text;
  align-items: center;
  border-top-left-radius: $farris-modal-content-border-radius;
  border-top-right-radius: $farris-modal-content-border-radius;
  border-bottom:$farris-modal-header-border-bottom;
  .close {
    color: $farris-modal-header-text;
    opacity: $farris-modal-header-close-opacity;
    padding: $farris-btn-icon-padding-y $farris-btn-icon-padding-x;
    margin: -$farris-modal-header-padding-y * 0.5 0;
    border: $farris-btn-icon-border-width solid transparent;
    font-size: 1rem;
    @include f-btn-icon-size();

    &:not(:disabled):not(.disabled):hover,
    &:not(:disabled):not(.disabled):focus {
      color: $farris-modal-header-text;
    }
  }
}

.modal-title {
  font-size: $farris-modal-title-font-size;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-footer,
.showtype-modal .fe-modal-footer-base {
  display: flex;
  align-items: center; 
  justify-content: flex-end;
  flex-shrink: 0;
  background: $farris-modal-footer-bg;
  padding:$farris-modal-footer-inner-gutter;
  box-shadow:$farris-modal-footer-box-shadow;

  > :not(:first-child) {
    margin-left: $farris-footer-btn-outer-gutter-left;
  }

  > :not(:last-child) {
    margin-right: $farris-footer-btn-outer-gutter-left;
  }
}

.modal-open {
  .modal {
    overflow-x: auto;
  }
}
